<style type="text/css">
.title{
	width: 100%;
	background:#F0F7FF;
	color: rgba(44,57,73,1);
	font-size: 20px;
    font-weight: bold;
	height:50px;
	padding:12px;
}
.kuang{
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
	border-radius: 16px;
	width:90%; margin:0 auto;
	min-height:600px;
	margin-bottom: 50px;
}
.bgcss{
	position:absolute;
	width:100%;
	height:40px;
	background:#F0F7FF;
	top:0px;
	
}
.ui-button-secondary{
	color: #fff!important;
    background-color: #E54C2A!important;
}
tr{
 border-top: 0px!important;
 font-size:16px;
}
</style>

<div class="　bg_bai my_po kuang"  style="top:48%;left:5%;width: 90%; background:#FFF; padding:25px;">
  <div class="ui-g">
     <!-- <button pButton type="button" label="{{'< Back'|translate}}"  (click)="back()" class="ui-button-secondary"></button>-->
       <img src="/assets/images/back.png" (click)="back()" alt="" style="width:108px; height:44px;">
  </div>

  <div class="ui-g" style="margin-top: 15px;">
    <div class="ui-g-6 ui-sm-12">
       <img src="/assets/images/house.jpg" alt="" style="display: block; width: 97%;border-radius: 25px;">
      <carousel>
        <slide *ngFor="let image of getMainImages(project)">
          <img src="image" alt="" style="display: block; width: 100%;border-radius: 25px;" (click)="openLargeImage(image)" >
        </slide>
      </carousel>
    </div>
    <div class="ui-g-6 ui-sm-12"  style="margin-top: 15px;">
      <h3><strong style="font-size:34px">{{project.name}}</strong></h3>
      <p style="padding-top:10px; padding-bottom:10px;">{{getFullAddress(project)}}</p>
      <table class="info-table" style="padding:10px;">
        <tr height="35">
          <td>{{'STATUS'|translate}}</td>
          <td>
            <a scrollTo href="#scroll-attachments">{{'How to sell'|translate}}</a>
          </td>
        </tr>
        <tr  height="35">
          <td>{{'Completion Date'|translate}}</td>
          <td>{{project.settlementDate}}</td>
        </tr>
        <!-- <tr>
          <td>{{'Featured Project'|translate}}</td>
          <td>{{isFeatured()}} </td>
        </tr> -->
        <tr  height="35">
            <td>{{'Type'|translate}}</td>
            <td>{{project.type}}</td>
          </tr>
        <tr  height="35">
          <td>{{'Price Range'|translate}}</td>
          <td>{{project.priceRange}}</td>
        </tr>
        <tr  height="35">
          <td>{{'Developer'|translate}}</td>
          <td>{{project.developer}}</td>
        </tr>
        <tr  height="35">
          <td>{{'Key Contact'|translate}}</td>
          <td>{{project.keyContact}}</td>
        </tr>
        <tr  height="35">
          <td>{{'Buyer\'s Incentive'|translate}}</td>
          <td>{{project.buyerIncentive}}</td>
        </tr>
        <tr  height="35">
          <td>{{'Features'|translate}}</td>
          <td>
            <div [innerHTML]="project.features"></div>
          </td>
        </tr>
        <!-- <tr>
          <td>Key Contacts</td>
          <td>
            <div class="ui-g-12">
              <i class="fa fa-address-book-o" aria-hidden="true"></i>
              Kylie Faith Zhang</div>
            <div class="ui-g-12">
              <i class="fa fa-envelope-o" aria-hidden="true"></i>
              kylie@lwphoenix.com.au</div>
            <div class="ui-g-12">
              <i class="fa fa-phone" aria-hidden="true"></i>
              0488 899 588</div>
          </td>
        </tr> -->
      </table>
    </div>
  </div>

  <div class="ui-g">
    <div class="ui-g-12 kuang" style="width:98%; left:1%;min-height: 260px; margin-top:20px;">
      <h4 style="background:#F0F7FF; text-align:center; padding:8px;">
        <i class="fa fa-info-circle" aria-hidden="true"></i>
        &nbsp;{{'Overview'|translate}}</h4>
      <div innerHTML="{{project.buildingOverview}}"></div>
    </div>
    <div class="ui-g-12 kuang" style="width:98%; left:1%;min-height: 260px;">
      <h4 id="scroll-attachments" style="background:#F0F7FF; text-align:center; padding:8px;">
        <i class="fa fa-paperclip" aria-hidden="true"></i>
        &nbsp;{{'How to sell'|translate}}</h4>

      <div *ngFor="let attachment of project['property-list-attachments']">
        <div class="ui-g-6 bold">|&nbsp; &nbsp;&nbsp; &nbsp; {{'Attachment'|translate}}</div>
        <div class="ui-g-6">
          <a [href]="attachment.filePath" target="_blank" download>{{attachment.originalFilename}}</a>
        </div>
      </div>
      
    </div>
    
  </div>

  <div class="ui-g-12 kuang" style="width:98%; left:1%;min-height: 260px;">
    <h4 style="background:#F0F7FF; text-align:center; padding:8px;">
      <i class="fa fa-map" aria-hidden="true"></i> &nbsp;{{'Map'|translate}}</h4>
  
  <div class="ui-g-12">
    <ng-container *ngIf="mapGoogleType; else elseMapTemplate">
      <agm-map class="map" [zoom]="12" [latitude]="project.y" [longitude]="project.x">
        <agm-marker [latitude]="project.y" [longitude]="project.x"></agm-marker>
      </agm-map>
      <!-- <div class="ui-g-12">
        <a href="javascript:void(0)" (click)="mapGoogleType=false">{{'Having trouble with opening Google map'|translate}}</a>
      </div> -->

    </ng-container>
    <ng-template #elseMapTemplate>
      <abm-map class="map" #map [options]="options" (ready)="onBaiduMap($event)" style="height: 300px"></abm-map>
    </ng-template>
   </div>
  </div>

  <div class="ui-g-12 kuang" style="width:98%; left:1%;min-height: 260px;">
    <h4 style="background:#F0F7FF; text-align:center; padding:8px;">
      <i class="fa fa-home" aria-hidden="true"></i>
      &nbsp;{{'Properties'|translate}}</h4>
  
  <div class="ui-g">
    <p-table #dt [columns]="cols" [paginator]="true" [resizableColumns]="true" [rows]="10" [responsive]="true" [value]="properties">
      <ng-template pTemplate="caption">
        <input type="text" pInputText size="50" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
        <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
      </ng-template>
     
      <ng-template pTemplate="header" let-columns>
        <tr>
          <th *ngFor="let col of columns" pResizableColumn [pSortableColumn]="col.field">
            {{col.header}}
            <p-sortIcon [field]="col.field"></p-sortIcon>
          </th>
          <!-- <th></th> -->
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData let-columns="columns" class="ui-resizable-column">
        <tr>
          <td *ngFor="let col of columns" [ngSwitch]="col.field">
            <div *ngSwitchCase="'lot'">
                <a href="javascript:void(0)" (click)="onViewRow(rowData)" > {{rowData[col.field]}}</a>
            </div>
            <div *ngSwitchCase="'price'">
              {{rowData[col.field] | currency}}
          </div>
            <div *ngSwitchDefault>
                {{rowData[col.field]}}
            </div>
            
          </td>
          <!-- <td>
            <p-button (click)="onViewRow(rowData)" styleClass="ui-button-primary" iconPos="left" icon="fa fa-eye"></p-button>
          </td> -->
        </tr>
      </ng-template>

    </p-table>
    </div>
  </div>
</div>

<p-dialog header="" [(visible)]="imgPreview" modal="true" height="800" positionTop="120">
    <img [src]="previewImgSrc" alt="" style="display: block; width: 100%;" >
</p-dialog>
<div style="width:100%; height:2000px;"></div>
